<template>
    <a-spin size="large" :spinning="spinning" tip="修改中, 请稍后...">
    <a-calendar v-model:value="value" style="height: 100%;" @select="handleSelectDate" @panelChange="handlePanelChange">
        <template #headerRender="{ value: current, onChange }">
            <div style="padding: 10px">
                <a-row type="flex" justify="end">
                    <a-col>
                        <a-select :dropdown-match-select-width="false" class="my-year-select" :value="String(current.year())" @change="newYear => {onChange(current.year(+newYear));}">
                            <a-select-option v-for="val in getYears(current)" :key="String(val)" class="year-item">{{ val }}年</a-select-option>
                        </a-select>
                        <a-select :dropdown-match-select-width="false" :value="String(current.month())" @change="selectedMonth => {onChange(current.month(parseInt(String(selectedMonth), 10)));}">
                            <a-select-option v-for="(val, index) in getMonths(current)" :key="String(index)" class="month-item">{{ val }}</a-select-option>
                        </a-select>
                        <a-button @click="() => { onChange(dayjs()); }">今日</a-button>
                    </a-col>
                </a-row>
            </div>
        </template>
        <template #dateCellRender="{ current }">
            <ul class="events">
                <li v-if="getListData(current).noon">🌞 {{ getListData(current).noon }}</li>
                <li v-if="getListData(current).night">⭐ {{ getListData(current).night }}</li>
            </ul>
        </template>
    </a-calendar>
    </a-spin>
    <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :title="formData.title" placement="right">
        <a-form :model="formData" name="basic" autocomplete>
            <a-form-item label="午饭" name="noon">
                <a-select v-model:value="formData.noon" mode="tags" style="width: 100%" placeholder="麻仁鸡翅" :open="false"></a-select>
            </a-form-item>
            <a-form-item label="晚饭" name="night">
                <a-select v-model:value="formData.night" mode="tags" style="width: 100%" placeholder="米酒甜汤" :open="false"></a-select>
            </a-form-item>
        </a-form>
        <template #extra>
            <a-space><a-button type="primary" @click="submit">提交</a-button></a-space>
        </template>
    </a-drawer>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { Dayjs } from 'dayjs';
import { reactive, ref, onMounted } from 'vue';
import { calendar_add, calendar_data } from '@/api';
import { public_msg_error, public_msg_success, public_msg_warning } from '@/utils/amsg';

const value = ref<Dayjs>();
const open = ref(false);
const data = ref({});
const spinning = ref(false);
const formData = reactive({ title: '', noon: new Array<string>(), night: new Array<string>() });

const handlePanelChange = (date) => {
    const year = date.format("YYYY");
    const month = date.format("MM");
    const mday = new Date(year, month, 0).getDate();
    const start = `${year}-${month}-01`;
    const last = `${year}-${month}-${mday}`;
    getData(start, last)
}
const getData = (start_time, last_time) => {
    calendar_data(start_time, last_time).then((res:any) => {
        if (res.code == 0) {
            data.value = res.data;
        }else public_msg_error(res.msg);
    })
}

const getMonths = (value: any) => {
    const localeData = value.localeData();
    const months: Array<string> = [];
    for (let i = 0; i < 12; i++) {
        months.push(localeData.monthsShort(value.month(i)));
    }
    return months;
};

const getYears = (value: Dayjs) => {
    const year = value.year();
    const years: Array<number> = [];
    for (let i = year - 10; i < year + 10; i += 1) {
        years.push(i);
    }
    return years;
};
const handleSelectDate = (date: Dayjs, source) => {
    if (source.source == 'date') {
        formData.title = date.format('YYYY-MM-DD');
        formData.noon = formData.title in data.value ? data.value[formData.title].noon != "" ? data.value[formData.title].noon.split(",") : [] : new Array();
        formData.night = formData.title in data.value ? data.value[formData.title].night != "" ? data.value[formData.title].night.split(",") : [] : new Array();
        open.value = true;
    }
};

const getListData:any = (value: Dayjs) => {
    const currdate = value.format('YYYY-MM-DD');
    if (data.value[currdate]) return data.value[currdate];
    return [];
};

const submit = () => {
    if (formData.noon.length == 0 && formData.night.length == 0) public_msg_warning("至少填写一顿饭");
    else {
        spinning.value = true;
        calendar_add(formData.title, formData.noon, formData.night).then((res:any) => {
            if (res.code == 0){
                public_msg_success(res.msg);
                pubcli_get_data();
            }else public_msg_error(res.msg);
            open.value = false;
        });
        spinning.value = false;
    }
}
const pubcli_get_data = () => {
    const year = new Date().getFullYear();
    const month = new Date().getMonth() + 1;
    const mday = new Date(year, month, 0).getDate();
    const start = `${year}-${month}-01`;
    const last = `${year}-${month}-${mday}`;
    getData(start, last)
}
onMounted(()=>pubcli_get_data());
</script>

<style scoped lang="less">
</style>